<template>
	<view class="h100">
		<view class="title">个人信息</view>
		<view class="cells">
			<view class="cell">
				<view class="left">手机号码</view>
				<view class="right">
					<input class="input-sp" placeholder="请输入手机号码" placeholder-class="holder" v-model="form.phone" type="text" />
				</view>
			</view>
			<u-line color="#EBEBEB" margin="32rpx 0"></u-line>
			<view class="cell">
				<view class="left">验证码</view>
				<view class="right">
					<input class="input-sp" placeholder="请输入验证码" placeholder-class="holder" v-model="form.code" type="text" />
					<text class="code" @click="handelSecond">{{ (second && `${second}s`) || '获取验证码' }}</text>
				</view>
			</view>
			<u-line color="#EBEBEB" margin="32rpx 0"></u-line>
			<view class="cell">
				<view class="left">车行所在地</view>
				<view class="right" @click="onChooseAddress">
					<view class="word">
						<text class="content">{{ form.address }}</text>
						<text class="holder">请选择车行所在地</text>
					</view>
					<u-icon name="arrow-right" size="18rpx" color="#969696"></u-icon>
				</view>
			</view>
		</view>
		<!-- 按钮相关 -->
		<view class="w-calc-30 absolute" style="bottom: 18%">
			<u-button type="primary" @click="handleApply"
				:customStyle="{ height: '80rpx', borderRadius: '15rpx', fontSize: '30rpx' }">
				提交
			</u-button>
			<view class="text-center fs22 mt32">
				<text class="base-color">《用户协议》</text>
				<text style="color: #a1a1a1">与</text>
				<text class="base-color">《隐私条款》</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		sendSms
	} from "@/api/login";
	import {
		userVipApply
	} from "@/api/user/index";
	import {
		checkLogin,
		navBack,
		navTo,
		showSuccess,
		showToast
	} from "@/core/app";
	const form = ref({
		phone: '',
		code: '',
		address: '',
		lat: '',
		lng: ''
	});

	/* 地址选择 */
	function onChooseAddress() {
		uni.chooseLocation({
			success: (res) => {
				form.value.address = res.address;
				form.value.lat = res.latitude;
				form.value.lng = res.longitude;
			}
		})
	}
	//获取验证码
	const getCode = async () => {
		showToast("正在获取验证码", "loading");
		let res = await sendSms({
			phone: form.value.phone,
		});
		if (res) {
			uni.hideLoading();
			showToast("验证码已发送");
		}
	};
	//申请会员
	const handleApply = async () => {
		if (!form.value.phone) {
			showToast("请输入手机号码");
			return false
		}
		if (!form.value.code) {
			showToast("请输入验证码");
			return false
		}
		// if(!form.value.address){
		// 	showToast("请选择车行所在地");
		// 	return false
		// }
		let res = userVipApply(form.value)
		showToast(res.msg);
		if (res.code == 200) {
			setTimeout(() => navBack(), 1000)
		}
		console.log(res, 'resrrr')
	}
	/* 倒计时控制 */
	const second = ref(0);
	const time = ref(null);

	function handelSecond() {
		if (second.value !== 0) return false;
		// TODO 请求验证码
		if (!form.value.phone) return showToast("请输入手机再点击发送");
		getCode()
		second.value = 60;
		time.value = setInterval(() => {
			second.value -= 1;
			if (second.value === 0) {
				clearInterval(time.value);
				time.value = null;
			}
		}, 1000);
	}
</script>

<style scoped lang="scss">
	.title {
		padding: 20rpx 0 20rpx 30rpx;
		box-sizing: border-box;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
	}

	.cells {
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;

		.cell {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.left {
				width: 209rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
			}

			.right {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.input-sp {
					width: 100%;
					flex: 1;
				}

				.code {
					font-weight: 400;
					font-size: 28rpx;
					color: #0759bb;
				}
			}

			.holder {
				font-weight: 400;
				font-size: 28rpx;
				color: #c5c5c5;
			}
		}
	}
</style>